<template>
  <div>
    <div class="focusbox">
      <div id="fullbanner">
        <div class="wrappic">
          <ul>
            <li class="plan" style="left: 0px;" v-for="(item,index) in bannerList" :key="index">
              <a class="plan_box" href="#" target="_blank">
                <img :src="item" width="1000" height="603">
              </a>
            </li>
          </ul>
        </div>
        <div class="helper">
          <div class="mask-left"></div>
          <div class="mask-right"></div>
          <a href="javascript:" class="prev arrow-left"></a>
          <a href="javascript:" class="next arrow-right"></a>
        </div>
      </div>
      <!-- <div class="focusbox_bg1"></div> -->
      <!-- <div class="focusbox_bg2"></div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "BannerImg",
  data(){
    return{
      bannerList:[
          'http://www.jyxue.com.cn/data/afficheimg/1448268647122735199.jpg',
        'http://www.jyxue.com.cn/data/afficheimg/1448269161756793406.jpg',
        'http://www.jyxue.com.cn/data/afficheimg/1448269047787421014.jpg'
      ]
    }
  }
}
</script>

<style scoped>
.focusbox {
  position: relative;
  overflow: hidden;
  zoom: 1;
}
#fullbanner {
  width: 1000px;
  height: 400px
;
  margin: auto;
  position: relative;
}
#fullbanner .wrappic {
  overflow: visible;
  position: absolute;
}
#fullbanner ul {
  width: 1000px;
  height: 603px;
}
#fullbanner .plan {
  background: #fff;
  z-index: 1;
  position: absolute;
  top: 0;
  width: 1000px;
  height: 603px;
  overflow: hidden;
  left: 1920px;
}
#fullbanner li a {
  display: block;
  width: 1000px;
  height: 603px;
  overflow: hidden;
}
#fullbanner img {
  width: 1000px;
  height: 603px;
}


#fullbanner .mask-right, #fullbanner .mask-left {
  z-index: 4;
  left: -1000px;
  /*filter: alpha(Opacity=50);*/
  opacity: .5;
  background: #fff;
  overflow: hidden;
}
#fullbanner .mask-right {
  left: 1000px;
}
#fullbanner .prev {
  position: absolute;
  top: 91%;
  margin-top: -25px;
  z-index: 11;
  left: 50%;
  margin-left: 320px;
}
.arrow-left, .arrow-right {
  height: 47px;
  width: 26px;
}
#fullbanner .next {
  position: absolute;
  top: 91%;
  margin-top: -25px;
  z-index: 11;
  right: 50%;
  margin-right: -410px;
}
</style>